export default {
    inserted(el, binding, vnode) {
        const obox = document.getElementById('canvas-page-container');
        let dragging = document.querySelector(binding.value.dragging)
        const odrag = el
        let isDrag = false;
        let x, y;

        dragging.onmousedown = (ev) => {
            x = ev.clientX - odrag.offsetLeft;
            y = ev.clientY - odrag.offsetTop;
            isDrag = true;
            document.onmousemove = function (ev) {
                // x = 鼠标点位置距离元素边缘 + 外部元素离屏幕边缘距离
                // left = 当前数据距离屏幕距离 - x = 得到拖拽元素边缘相对外部元素的距离即相对定位left
                console.log(isDrag)
                if (isDrag) {
                    let ev = window.event || ev;
                    odrag.style.left = (ev.clientX - x) + "px";
                    odrag.style.top = (ev.clientY - y) + "px";
                    if (parseInt(odrag.style.left) < 0) {
                        odrag.style.left = 0;
                    }
                    if (parseInt(odrag.style.top) < 0) {
                        odrag.style.top = 0;
                    }
                    if (parseInt(odrag.style.left) > obox.clientWidth - odrag.clientWidth) {
                        odrag.style.left = (obox.clientWidth - odrag.clientWidth) + "px";
                    }
                    if (parseInt(odrag.style.top) > obox.clientHeight - odrag.clientHeight) {
                        odrag.style.top = (obox.clientHeight - odrag.clientHeight) + "px";
                    }
                }
            }
            document.onmouseup = function () {
                isDrag = false;
            }
        }

    }
}
